<template>
	<div class="wrapper">
		<div class="back-icon" @click="goBack()">
			<i class="fa fa-arrow-left"></i>
		</div>
		<!-- header部分 -->
		<header>
			<p>我的订单</p>
		</header>
		
		<!-- 订单列表部分 -->
		<h3>未支付订单信息</h3>
		<ul class="order">
			<li v-for="item in orderArr" v-show="item.orderState==0&&item.orderDel==0">
				<div class="order-info">
					<p>
						{{item.business.businessName}}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}</p>
						<div class="order-info-right-icon" @click="toPayment(item.orderId)">去支付</div>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="oditem in item.list">
						<div class="order-detailet-left">
							<p>{{oditem.food.foodName}} x {{oditem.quantity}}</p>
						</div>
						<p>&#165;{{oditem.food.foodPrice}}</p>
					</li>
					<li>
						<div class="order-detailet-left">
							<p>配送费</p>
						</div>
						<p>&#165;{{item.business.deliveryPrice}}</p>
					</li>
					<li>
						<div class="discount">
							<p>积分抵扣</p>
						</div>
						<p>-&#165;{{item.discount}}</p>
					</li>
					<li>
						<p>积分</p>
						<p>+ {{item.orderTotal}}</p>
					</li>
				</ul>
			</li>
		</ul>
		<h3>已支付订单信息</h3>
		<ul class="order">
			<li v-for="item in orderArr" v-show="item.orderState==1&&item.orderDel==0">
				<div class="order-info">
					<p>
						{{item.business.businessName}}
						<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
					</p>
					<div class="order-info-right">
						<p>&#165;{{item.orderTotal}}</p>
					</div>
				</div>
				<ul class="order-detailet" v-show="item.isShowDetailet">
					<li v-for="oditem in item.list">
						<div class="order-detailet-left">
							<p>{{oditem.food.foodName}} x {{oditem.quantity}}</p>
						</div>
						<p>&#165;{{oditem.food.foodPrice}}</p>
					</li>
					<li>
						<div class="order-detailet-left">
							<p>配送费</p>
						</div>
						<p>&#165;{{item.business.deliveryPrice}}</p>
					</li>
					<li>
						<div class="discount">
							<p>积分抵扣</p>
						</div>
						<p>-&#165;{{item.discount}}</p>
					</li>
					<li>
						<p>积分</p>
						<p>+ {{item.orderTotal}}</p>
					</li>
					<li>
						<button @click="deleteOrder(item.orderId)">删除订单记录</button>
					</li>
				</ul>
			</li>
			
		</ul>
		
		<!--底部菜单部分-->
		<Footer></Footer>
	</div>
</template>

<script>
	import {useRouter} from 'vue-router'
	import {useRoute} from 'vue-router'
	import {ref,onMounted,getCurrentInstance, reactive} from 'vue';
	import Footer from '../components/Footer.vue'
	
	export default{
		setup() {
			const currentInstance = getCurrentInstance();
			const router = useRouter();
			const route = useRoute();
			const orderArr = ref([]);
			const user = ref({});
			const goBack = () => {
				router.go(-1);
			};
			const detailetShow = (orders) => {
				orders.isShowDetailet = !orders.isShowDetailet;
			}
			const deleteOrder = (orderId) => {
				if(confirm("确认要删除此纪录？")){
					currentInstance.appContext.config.globalProperties.$axios.post(
							'OrdersController/removeOrder', currentInstance.appContext.config
							.globalProperties.$qs.stringify({
								orderId: orderId
							}))
						.then(response => {
							if(response.data<0){
								swal("记录删除失败！");
								return;
							}
							location.reload();
						})
						.catch(error => {
							console.error(error);
						});
				}
			}
			const toPayment = (orderId) => {
				router.push({
					name:'Payment',
					params:{
						orderId:orderId,
					},
				});
			}
			onMounted(() => {
				user.value = currentInstance.appContext.config.globalProperties.$getSessionStorage('user');
				// 根据orderTypeId查询商家信息
				currentInstance.appContext.config.globalProperties.$axios.post(
						'OrdersController/listOrdersByUserId', currentInstance.appContext.config
						.globalProperties.$qs.stringify({
							userId: user.value.userId
						}))
					.then(response => {
						let result = response.data;
						for(let orders of result){
							orders.isShowDetailet = false;
						}
						orderArr.value = result;
						console.log(orderArr.value);
					})
					.catch(error => {
						console.error(error);
					});
			});
			
			return{
				orderArr,user,
				detailetShow,goBack,toPayment,deleteOrder
			}
		},
		components: {
			Footer
		},
	}
</script>

<style scoped>
	/*********** 总容器 ***********/
	.wrapper{
		width: 100%;
		height: 100%;
	}
	/*********** 回退按钮 ***********/
	.wrapper .back-icon{
		width: 12vw;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*********** header部分 ***********/
	.wrapper header{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		/* 这行代码保证header位于最顶层，不加这一行会导致商家图片遮挡header，因为默认情况下，绝对位置的元素后写的位于上层 */
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/*********** 历史订单列表部分 ***********/
	.wrapper h3{
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}
	.wrapper .order{
		box-sizing: border-box;
		padding-bottom: 14vw;
		width: 100%;
	}
	.wrapper .order li{
		width: 100%;
	}
	.wrapper .order li .order-info{
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .order li .order-info .order-info-right{
		display: flex;
	}
	/* 去支付按钮优化 */
	.wrapper .order li .order-info .order-info-right .order-info-right-icon {
	    background-color: #FF9800; /* 使用更明亮的颜色 */
	    color: #fff;
	    border-radius: 5px; /* 增加圆角半径 */
	    margin-left: 2vw;
	    user-select: none;
	    cursor: pointer;
	    padding: 0.5vw 1vw; /* 增加内边距 */
	    font-size: 4vw; /* 调整字体大小 */
	    font-weight: bold; /* 加粗字体 */
	    transition: all 0.3s ease; /* 添加过渡效果 */
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
	    display: inline-flex; /* 使内容居中 */
	    align-items: center;
	    justify-content: center;
	}
	
	/* 悬停效果 */
	.wrapper .order li .order-info .order-info-right .order-info-right-icon:hover {
	    background-color: #FF7043; /* 悬停时改变背景色 */
	    transform: translateY(-1px); /* 悬停时轻微上移 */
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 增加阴影 */
	}
	
	/* 激活状态 */
	.wrapper .order li .order-info .order-info-right .order-info-right-icon:active {
	    transform: scale(0.95); /* 按下时缩小 */
	    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 减小阴影 */
	}
	.wrapper .order li .order-detailet{
		width: 100%;
	}
	.wrapper .order li .order-detailet li{
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
</style>